feat(devtools): extract theme to devtool components by harry-whorlow · Pull Request #2079 · TanStack/form

harry-whorlow · 2026-03-12T21:11:16Z

Moves devtool theme from the utils to the component to avoid the theme miss-match error we previously had.

Summary by CodeRabbit

New Features
- Devtools components now accept a theme property to enable visual customization.
Chores
- Updated @tanstack/devtools-ui dependency to version 0.5.1.
- Updated @tanstack/devtools-utils dependency to version 0.4.0.
- Applied version patches across form-devtools, react-form-devtools, and solid-form-devtools packages.

changeset-bot · 2026-03-12T21:11:26Z

🦋 Changeset detected

Latest commit: cb51a89

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@tanstack/react-form-devtools	Patch
@tanstack/solid-form-devtools	Patch
@tanstack/form-devtools	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

nx-cloud · 2026-03-12T21:11:43Z

View your CI Pipeline Execution ↗ for commit cb51a89

Command	Status	Duration	Result
`nx affected --targets=test:sherif,test:knip,tes...`	✅ Succeeded	<1s	View ↗
`nx run-many --target=build --exclude=examples/**`	✅ Succeeded	<1s	View ↗

☁️ Nx Cloud last updated this comment at 2026-03-15 11:07:05 UTC

harry-whorlow · 2026-03-12T21:12:15Z

do note merge till TanStack/devtools#386 is merged

coderabbitai · 2026-03-15T09:53:04Z

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f351f2b1-6171-47fa-88b4-dc24e9e684e6

📥 Commits

Reviewing files that changed from the base of the PR and between 3f52569 and cb51a89.

⛔ Files ignored due to path filters (1)

pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (5)

.changeset/wicked-feet-camp.md
packages/form-devtools/package.json
packages/form-devtools/src/components/index.tsx
packages/react-form-devtools/package.json
packages/solid-form-devtools/package.json

📝 Walkthrough

Walkthrough

This PR extracts theme functionality into a dedicated context provider for the form devtools package. The Devtools component now accepts a theme prop and wraps its existing providers with ThemeContextProvider. Dependencies are bumped across form-devtools, react-form-devtools, and solid-form-devtools packages.

Changes

Cohort / File(s)	Summary
Changeset `.changeset/wicked-feet-camp.md`	Adds patch version bump entries for `@tanstack/react-form-devtools`, `@tanstack/solid-form-devtools`, and `@tanstack/form-devtools` with summary "Extract devtools theme to form devtools".
Dependency Updates `packages/form-devtools/package.json`, `packages/react-form-devtools/package.json`, `packages/solid-form-devtools/package.json`	Updates `@tanstack/devtools-utils` from ^0.3.2 to ^0.4.0; form-devtools also updates `@tanstack/devtools-ui` to ^0.5.1.
Component Refactoring `packages/form-devtools/src/components/index.tsx`	Changes Devtools component signature to accept props containing a theme. Wraps existing providers with ThemeContextProvider and adds DevtoolsProps interface. Imports TanStackDevtoolsTheme type from `@tanstack/devtools-ui`.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A theme context hops into place,
Devtools now accept with grace,
Props and providers intertwine,
The devtools sparkle and shine! ✨

✨ Finishing Touches

📝 Generate docstrings (stacked PR)
📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch devtools-theme-update

📝 Coding Plan

Generate coding plan for human review comments

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

pkg-pr-new · 2026-03-15T09:56:22Z

More templates

@tanstack/angular-form

npm i https://pkg.pr.new/@tanstack/angular-form@2079

@tanstack/form-core

npm i https://pkg.pr.new/@tanstack/form-core@2079

@tanstack/form-devtools

npm i https://pkg.pr.new/@tanstack/form-devtools@2079

@tanstack/lit-form

npm i https://pkg.pr.new/@tanstack/lit-form@2079

@tanstack/react-form

npm i https://pkg.pr.new/@tanstack/react-form@2079

@tanstack/react-form-devtools

npm i https://pkg.pr.new/@tanstack/react-form-devtools@2079

@tanstack/react-form-nextjs

npm i https://pkg.pr.new/@tanstack/react-form-nextjs@2079

@tanstack/react-form-remix

npm i https://pkg.pr.new/@tanstack/react-form-remix@2079

@tanstack/react-form-start

npm i https://pkg.pr.new/@tanstack/react-form-start@2079

@tanstack/solid-form

npm i https://pkg.pr.new/@tanstack/solid-form@2079

@tanstack/solid-form-devtools

npm i https://pkg.pr.new/@tanstack/solid-form-devtools@2079

@tanstack/svelte-form

npm i https://pkg.pr.new/@tanstack/svelte-form@2079

@tanstack/vue-form

npm i https://pkg.pr.new/@tanstack/vue-form@2079

commit: ad8f709

sentry · 2026-03-15T10:42:56Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 90.14%. Comparing base (6892ed0) to head (cb51a89).
⚠️ Report is 156 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2079      +/-   ##
==========================================
- Coverage   90.35%   90.14%   -0.21%     
==========================================
  Files          38       49      +11     
  Lines        1752     2010     +258     
  Branches      444      520      +76     
==========================================
+ Hits         1583     1812     +229     
- Misses        149      178      +29     
  Partials       20       20

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

feat(devtools): extract theme to devtool components

24f4756

harry-whorlow force-pushed the devtools-theme-update branch from 7078e85 to 24f4756 Compare March 15, 2026 09:52

fix: lock file

ad8f709

harry-whorlow marked this pull request as ready for review March 15, 2026 11:04

Merge branch 'main' into devtools-theme-update

cb51a89

harry-whorlow merged commit 458a9be into main Mar 15, 2026
4 checks passed

harry-whorlow deleted the devtools-theme-update branch March 15, 2026 11:06

github-actions bot mentioned this pull request Mar 15, 2026

ci: Version Packages #2082

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(devtools): extract theme to devtool components#2079

feat(devtools): extract theme to devtool components#2079
harry-whorlow merged 3 commits intomainfrom
devtools-theme-update

harry-whorlow commented Mar 12, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

changeset-bot bot commented Mar 12, 2026 •

edited

Loading

Uh oh!

nx-cloud bot commented Mar 12, 2026 •

edited

Loading

Uh oh!

harry-whorlow commented Mar 12, 2026

Uh oh!

coderabbitai bot commented Mar 15, 2026 •

edited

Loading

Review failed

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

pkg-pr-new bot commented Mar 15, 2026

Uh oh!

sentry bot commented Mar 15, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

harry-whorlow commented Mar 12, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

changeset-bot bot commented Mar 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

nx-cloud bot commented Mar 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

harry-whorlow commented Mar 12, 2026

Uh oh!

coderabbitai bot commented Mar 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

pkg-pr-new bot commented Mar 15, 2026

Uh oh!

sentry bot commented Mar 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

harry-whorlow commented Mar 12, 2026 •

edited by coderabbitai bot

Loading

changeset-bot bot commented Mar 12, 2026 •

edited

Loading

nx-cloud bot commented Mar 12, 2026 •

edited

Loading

coderabbitai bot commented Mar 15, 2026 •

edited

Loading

sentry bot commented Mar 15, 2026 •

edited

Loading